<template>
  <div id="app">
    <!-- 头部 -->
        <div class="heade">
            <div class="nav">
                <div class="na">
                   <router-link to="/myWeather">
                        <a class="navp">
                        <span class="data">
                            <i :class='this.icon | filWeather(this.icon)'></i>
                        </span>
                        <p>{{low}}</p>
                    </a>
                   </router-link>
                </div>
                <div class="navipt">
                    <div><img src="../assets/img/教育APP切图/首页/搜索@2x.png" alt=""></div>
                    <input type="text" placeholder="web前端基础课程">
                </div>
                <div><a href=""><img src="../assets/img/教育APP切图/首页/矩形1拷贝@2x.png" alt="" class="navi"></a></div>
            </div>
        </div>
        <!-- 身体 -->
        <div class="st">
            <!-- st1 -->
            <div class="st1">
                <div class="st11">
                    <div>
                        <img src="../assets/img/教育APP切图/首页/矩形6拷贝@2x.png" alt="">
                        <p>软件入门</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/课程咨询@2x.png" alt="">
                        <p>课程咨询</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/精选专辑@2x.png" alt="">
                        <p>精选专辑</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/课程搜索@2x.png" alt="">
                        <p>课程搜索</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/作品图@2x.png" alt="">
                        <p>作品圈</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/学习视频@2x.png" alt="">
                        <p>学习视频</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/设计文章@2x.png" alt="">
                        <p>设计文章</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/学习笔记@2x.png" alt="">
                        <p>学习笔记</p>
                    </div>
                </div>
            </div>
            <!-- st_t -->
            <div class="st_t">
                <h2>最新课程</h2>
                <div class="st_t1">
                    <ul class="st_to">
                    <li v-for="item in newList" :key='item.ID' @click="fun(item.ID)">
                    <!-- <a href="javascrit:;"> -->
                   <img :src='item.Cpic' alt="">
                    <p>{{item.Cname}}</p>
                <!-- </a> -->
                </li>
                    </ul>
                    <ul class="st_tpoint">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!-- st3 -->
            <div class="st3">
                <h2>推荐讲师</h2>
                <div class="st3o">
                    <ul>
                        <li>
                           <router-link to="/myTeacher">
                                <a>
                                <div class="st3oo">
                                    <span><img src="../assets/img/教育APP切图/首页/headpic.png" alt=""></span>
                                    <div>
                                        <h4>野田</h4>
                                        <p>关注人数：6826</p>
                                    </div>
                                    <button>关注</button>
                                </div>
                                <div class="st3ot">
                                    <div>
                                        <img src="../assets/img/教育APP切图/首页/推荐1@2x.png" alt="">
                                        <p>HTML标签的运用</p>
                                    </div>
                                    <div>
                                        <img src="../assets/img/教育APP切图/首页/推荐2@2x.png" alt="">
                                        <p>HTML标签的运用</p>
                                    </div>
                                </div>
                            </a>
                           </router-link>
                        </li>
                        <li>
                           <router-link to="/myTeacher">
                                <a>
                                <div class="st3oo">
                                    <span><img src="../assets/img/教育APP切图/首页/headpic.png" alt=""></span>
                                    <div>
                                        <h4>野田</h4>
                                        <p>关注人数：6826</p>
                                    </div>
                                    <button>关注</button>
                                </div>
                                <div class="st3ot">
                                    <div>
                                        <img src="../assets/img/教育APP切图/首页/推荐1@2x.png" alt="">
                                        <p>HTML标签的运用</p>
                                    </div>
                                    <div>
                                        <img src="../assets/img/教育APP切图/首页/推荐2@2x.png" alt="">
                                        <p>HTML标签的运用</p>
                                    </div>
                                </div>
                            </a>
                           </router-link>
                        </li>
                        <li>
                           <router-link to="/myTeacher">
                                <a>
                                <div class="st3oo">
                                    <span><img src="../assets/img/教育APP切图/首页/headpic.png" alt=""></span>
                                    <div>
                                        <h4>野田</h4>
                                        <p>关注人数：6826</p>
                                    </div>
                                    <button>关注</button>
                                </div>
                                <div class="st3ot">
                                    <div>
                                        <img src="../assets/img/教育APP切图/首页/推荐1@2x.png" alt="">
                                        <p>HTML标签的运用</p>
                                    </div>
                                    <div>
                                        <img src="../assets/img/教育APP切图/首页/推荐2@2x.png" alt="">
                                        <p>HTML标签的运用</p>
                                    </div>
                                </div>
                            </a>
                           </router-link>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- st4 -->
            <div class="st4">
                <div class="st4o">
                    <h4>猜你喜欢</h4>
                    <p>更多&gt;</p>
                </div>
                <div class="st4t">
                  <a  v-for="item in likeList" :key='item.ID' @click='fn2(item.ID)'>
                   <img :src="item.Cpic" alt="">
                    <div class="st4t1">
                    <div>
                        <h5>{{item.Cname}}</h5>
                        <p>视频时长：20分54秒</p>
                    </div>
                    <div>
                        <img src="../assets/img/教育APP切图/首页/收藏@2x.png" alt="">
                    </div>
                </div>
                </a>
                </div>
            </div>

        </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myFooter from "@/components/myFooter.vue";
import {listData} from '@/api/myIndex'
export default {
  name: "myIndex",
  components: {
    myFooter,
  },
  data() {
      return {
          likeList:[],
          newList:[],
          city:'南京',
          data:'',
          low:'',
          icon:''
      }
      
  },
  filters:{
            filWeather(e){
                if(e==='多云') return 'iconfont icon-duoyun'
                if(e==='小雨') return 'iconfont icon-xiaoyu'
                if(e==='中雨') return 'iconfont icon-zhongyu'
                if(e==='大雨') return 'iconfont icon-dayu'
                if(e==='小雪') return 'iconfont icon-xiaoxue'
                if(e==='中雪') return 'iconfont icon-zhongxue'
                if(e==='大雪') return 'iconfont icon-daxue'
                if(e==='阴') return 'iconfont icon-tianqi-yin'
                if(e==='雷阵雨') return 'iconfont icon-tianqi-leidiantianqi'
                if(e==='晴') return 'iconfont icon-qing'
            }
        },
    methods: {
        fun(e){
            this.$router.push({
                path:'/couresVideo',
                name:'视频',
                query:{
                    courseId:e
                }
            })
            sessionStorage.setItem('addres','/myIndex')
        },
        fn2(e){
            this.$router.push({
                path:'/couresVideo',
                name:'视频',
                query:{
                    courseId:e
                }
            })
            sessionStorage.setItem('addres','/myIndex')
        },
        getWeather(e){
            this.$axios({
      url:"http://wthrcdn.etouch.cn/weather_mini?city=" + e,
      methods:'get'
  }).then(res=>{
      if(res.status===1000){
      console.log(res);
      this.data=res.data.forecast
      this.low=this.data[0].low.split(" ")[1]
      this.icon=this.data[0].type
      }
  }).catch(err=>{
      console.log(err);
  })
        }
        
    },
  mounted() {
  if (!sessionStorage.getItem('city')) {
      this.getWeather(this.city)
  }else{
      this.getWeather(sessionStorage.getItem('city'))
  }
  listData().then(res=>{
          if (res.success==='获取数据成功') {
            //   console.log(res.data.newList);
              this.likeList=res.data.likesList
              this.newList=res.data.newList
          }
      }).catch(err=>{
          console.log(err);
      })
  },
};
</script>
<style scoped lang="scss">
h4 {
    font-size: 3rem;
}


/* 头部 */

.heade {
    width: 100%;
    height: 30rem;
    background-image: url(../assets/img/教育APP切图/首页/banner@2x.png);
    background-repeat: no-repeat;
    background-size: 100% 30rem;
}

.nav {
    width: 100%;
    height: 8rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.na {
    padding-top: 2rem;
}

.navp {
    font-size: 2.2rem;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    i {
        font-size: 3.7rem;
    }
    >span {
        display: block;
        width: 4.2rem;
        height: 4.2rem;
        >img {
            width: 4.2rem;
            height: 4.2rem;
        }
    }
}

.navi {
    width: 3.2rem;
    height: 3.3rem;
}

.nav input {
    width: 58.3rem;
    height: 5rem;
    border-radius: 5rem;
    color: #ccc;
    font-size: 3rem;
    padding-left: 6rem;
}

.navipt {
    >div {
        >img {
            width: 3.1rem;
            height: 3rem;
        }
        position: absolute;
        left: 1.5rem;
        top: 1rem;
    }
    position: relative;
}


/* 身体 */

.st {
    background: #f2f2f2;
    width: 100%;
}


/* .st1 */

.st1 {
    width: 100%;
    height: 33rem;
    background: #fff;
}

.st11 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    height: 28.5rem;
    padding-top: 2rem;
    >div {
        width: 13.5rem;
        height: 11.5rem;
        font-size: 2.4rem;
        color: #333;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    img {
        width: 8rem;
        height: 8rem;
    }
}


/* st_t */

.st_t {
    width: 100%;
    background: #fff;
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2rem;
    >h2 {
        font-size: 3rem;
        color: #333;
        margin-bottom: 1rem;
    }
}

.st_tpoint {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 6rem;
    >li {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #ccc;
    }
}


/* st_to */

.st_to>li {
    width: 33.8rem;
    font-size: 2.4rem;
    color: #111111;
    height: 27rem;
}

.st_t1 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.st_to {
    img {
        width: 33.8rem;
        height: 20rem;
        border-radius: 2rem;
        margin-bottom: 1rem;
    }
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}


/* st3 */

.st3 {
    width: 100%;
    height: 45rem;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    justify-content: space-around;
    >h2 {
        font-size: 3rem;
    }
}

.st3o {
    width: 100%;
    overflow: scroll;
    &::-webkit-scrollbar {
        height: 0;
    }
    >ul {
        width: 180rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    a {
        display: flex;
        width: 56rem;
        height: 32rem;
        border-radius: 2rem;
        padding: 2rem;
        background: #fff;
        flex-direction: column;
        justify-content: space-around;
    }
}

.st3oo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    > {
        span {
            display: block;
            >img {
                width: 7rem;
                height: 7rem;
            }
            width: 7rem;
            height: 7rem;
        }
        button {
            width: 11rem;
            height: 4rem;
            border-radius: 2rem;
            background: #5064eb;
            font-size: 2.2rem;
            color: #fff;
        }
        div {
            width: 19rem;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
        }
    }
    p {
        font-size: 2rem;
        color: #999;
    }
}

.st3ot {
    img {
        width: 23rem;
        height: 14rem;
        border-radius: 1rem;
        margin-bottom: 1rem;
    }
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    p {
        font-size: 1.8rem;
        color: #1f1f1f;
    }
}


/* st4 */

.st4 {
    background: #fff;
    padding: 2rem;
}

.st4o {
    width: 100%;
    height: 6.6rem;
    display: flex;
    line-height: 6.6rem;
    justify-content: space-between;
    align-items: center;
    font-size: 3rem;
}

.st4t>a {
    width: 70.7rem;
    height: 43.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    >img {
        width: 69.4rem;
        height: 34rem;
        border-radius: 2.5rem;
    }
}

.st4t1 {
    img {
        width: 3.6rem;
        height: 3.2rem;
    }
    h5 {
        font-size: 2.4rem;
        margin-bottom: 0.5rem;
    }
    p {
        font-size: 2.2rem;
        color: 8f8f8f;
    }
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* gd */

.gd {
    width: 100%;
    height: 9.8rem;
}


/* box */

.box {
    position: fixed;
    bottom: 0;
}
</style>